/**
 * 装车控制 - 参数设置 - style
 * @author xiaoxujs
 */

import styled from "styled-components";
import liaochang from "../../../assets/image/RemoteControl/liaochang-ok.png";

export const LoadingControlParameterSettingsBox = styled.div`
    padding: 3rem 5rem 0;
    .qiyong-text{
        font-weight: 500;
        font-size: 1.6rem;
        color: #02D154;
        margin-left: 1rem;
    }
    .tingyong-text{
        font-weight: 500;
        font-size: 1.6rem;
        color: #999999;
        margin-left: 1rem;
    }
    .lgl-title-button-style{
        width: 11.2rem;
        height: 4rem;
        background: #FFFFFF;
        border-radius: .8rem;
        border: .1rem solid #E9E9E9;
        display: flex;
        align-items: center;
        justify-content: center;
        .lgl-title-button-style-nei{
            width: 10.4rem;
            height: 3.2rem;
            background: #0071E5;
            border-radius: .5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 1.4rem;
            color: #FFFFFF;
        }
    }
    .lgl-list-title-box{
        height: 5.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 2rem ;
        .lgl-list-title-text{
            font-weight: bold;
            font-size: 1.6rem;
            color: #333333;
            margin-left: 2rem;
        }
    }
    .goback-box{
        display: flex;
        align-items: center;
        height: 1.4rem;
        font-weight: 500;
        font-size: 1.4rem;
        color: #999999;
        margin-top: 1.6rem;
        .iconfont {
            margin-right: 0.9rem;
            margin-left: 2rem;
            cursor: pointer;
            font-size: 1.4rem;
        }
    }

        .zhuangchezhan-box{
            width: 182rem;
            height: 13.2rem;
            background: #FFFFFF;
            border-radius: .4rem;
            padding-left: 2rem;
            box-sizing: border-box;
            .zcz-shang{
                height: 5.5rem;
                border-bottom: 0.1rem solid #F3F3F3;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .zcz-shang-left{
                    display: flex;
                    align-items: center;
                    .text{
                        font-weight: bold;
                        font-size: 1.6rem;
                        color: #333333;
                        margin-right: 2rem;
                    }
                    .wuliao{
                        width: 14.4rem;
                        height: 3.2rem;
                        background: rgba(0, 113, 229, .1);
                        border-radius: .4rem;
                        display: flex;
                        align-items: center;
                        font-weight: 500;
                        font-size: 1.4rem;
                        color: #0071E5;
                        margin: 0 2rem;
                        .wuliao-image{
                            width: 1.6rem;
                            height: 1.6rem;
                            background: url(${liaochang});
                            background-size: 100% 100%;
                            margin: 0 1rem
                        }
                    }
                    .zhuangtai{
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #999999;
                    }
                    .tourushiyong{
                        margin-left: 1rem;
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #02D154;
                    }
                    .tingzhishiyong{
                        margin-left: 1rem;
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: rgba(0, 0, 0, 0.25);
                    }
                }
            }
            .zcz-xia{
                height: 7.6rem;
                display: flex;
                align-items: center;
                .zcz-xia-item{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .zcz-xia-item-title{
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #999999;
                        margin-right: 1rem;
                    }
                    .zcz-xia-item-value{
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #333333;
                    }
                }
            }
        }
`
export const LCPTItle = styled.div`
    height: 5.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lcptitle-left-box{
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 1.8rem;
        color: #333333;
        .gun{
            width: .4rem;
            height: 1.8rem;
            background: #0071E5;
            border-radius: .2rem;
            margin-right: 1rem;
        }
    }

`


export const WuliaomingchengBox = styled.div`
    height: 7.6rem;
    padding: 0 4.7rem;

    display: flex;
    align-items: center;
    box-sizing: border-box;
    .zcz-xia-item-title{
        font-weight: 500;
        font-size: 1.6rem;
        color: #999999;
        margin-right: 1rem;
    }
    .zcz-xia-item-value{
        font-weight: 500;
        font-size: 1.6rem;
        color: #333333;
    }
`
export const CardHtmlBox = styled.div`
    /* width: 182rem; */
    /* height: 13.2rem; */
    background: #FFFFFF;
    border-radius: .4rem;
    margin-top: 2rem;

    .box-top{
        height: 5.5rem;
        border-bottom: .1rem solid #F3F3F3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        box-sizing: border-box;
        .box-top-title{
            font-weight: bold;
            font-size: 1.6rem;
            color: #333333;
            display: flex;
            align-items: center;
            .text{
                font-weight: bold;
                font-size: 1.6rem;
                color: #333333;
                margin-right: 2rem;
            }
            .zhuangtai{
                font-weight: 500;
                font-size: 1.6rem;
                color: #999999;
            }
            .zhaungtai-text{
                margin-left: 1rem;
                font-weight: 500;
                font-size: 1.6rem;
                color: #02D154;
                margin-left: 1rem;
            }
        }
    }
`

export const ListStyleModuleBox = styled.table`
  width: 100%;
  border: .1rem solid #F3F3F3;
    .box-title-tr{
        /* width: 178rem; */
        height: 6rem;
        background: #F2F2F2;
        th{
            line-height: 6rem;
            font-weight: 500;
            font-size: 1.6rem;
            color: #999999;
        }
    }
    .box-tr{
        /* width: 178rem; */
        height: 6rem;
        /* background: #F2F2F2; */
        td{
            line-height: 6rem;
            font-weight: 500;
            font-size: 1.6rem;
            color: #333333;
        }

    }
`

export const MoshiSetBox = styled.div`
    width: 182rem;
    height: 29.3rem;
    background: #FFFFFF;
    border-radius: .4rem;
    padding: 0 2rem;
    box-sizing: border-box;
    .title{
        height: 5.7rem;
        line-height: 5.7rem;
        font-weight: 500;
        font-size: 1.6rem;
        color: #333333;
    }
    .cards-box{
        height: 21.6rem;
        display: flex;
        justify-content: space-between;
        .cards-item-box{
            width: 58rem;
            height: 21.6rem;
            background: #F8F8F8;
            border-radius: .4rem;
            .card-item-title-box {
                height: 5.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 2rem;
                box-sizing: border-box;
                border-bottom: .1rem solid  #EEEEEE;
                .card-item-title-left-box{
                    display: flex;
                    align-items: center;
                    .shuaka-text{
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #333333;
                        margin-right: 1rem;
                    }
                    .shiyongzhuangtai-text{
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 1.6rem;
                        color: #999999;
                    }

                }
            
            }
            .card-item-commit-box{
                height: 16rem;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
           
                .card-item-commit-title-box{
                    height: 6rem;
                    border-bottom: .1rem solid #F3F3F3;
                    background: #FFFFFF;
                    width: 54rem;
                    display: flex;
                    align-items: center;
                    .card-item-commit-title-text{
                        height: 6rem;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: bold;
                        font-size: 1.6rem;
                        color: #999999;
                    }
                    
                }
                .card-item-commit-value-box{
                    height: 6rem;
                    border-bottom: .1rem solid #F3F3F3;
                    background: #FFFFFF;
                    width: 54rem;
                    display: flex;
                    align-items: center;
                    .card-item-commit-value-text{
                        height: 6rem;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: bold;
                        font-size: 1.6rem;
                        color: #333333;
                    }
                    
                }
            }
        }
    }
`

export const XianshimoshiBox = styled.div`
background: #F6F6F6;
padding: 1rem 2rem;
`

export const VideoBox = styled.div`
    .btn{
        text-align: center;
    }
    .imgBox{
        .title{
            font-size: 1.6rem;
        }
        .main{
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            .mainbox{
                margin-right: 2rem;
                border-radius: .4rem;
                overflow: hidden;
                margin-bottom: 1rem;
            }
        }
    }
    
`

export const ItemBox = styled.div`
    width: 100%;
    margin-top: 2rem;
    background-color: #fff;
    border-radius: 0.4rem;
    padding-bottom: 1.5rem;
    .item-title{
        height: 5.5rem;
        line-height: 5.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.5rem;
        border-bottom: 1px solid #F3F3F3;
        font-size: 1.6rem;
        font-weight: bold;
        .blueBox{
            margin-left: 2rem;
            background-color: rgba(0,113,229,.1);
            font-size: 1.5rem;
            color: #0071E5;
            padding: 0 1.5rem;
            height: 3.2rem;
            border-radius: 0.4rem;
            line-height: 3.2rem;
            text-align: center;
            font-weight: 500;
        }
        .online{
            margin-left: 2rem;
            background: rgba(82,196,26,0.1);
            color: #52C41A;
            border-radius: .4rem;
            padding: 0 1rem 0 1rem;
            height: 3.2rem;
            line-height: 3.2rem;
            font-size: 1.4rem;
            font-weight: 500;
        }
        .offline{
            height: 3.2rem;
            line-height: 3.2rem;
            margin-left: 2rem;
            background: rgba(255,87,34,0.1);
            color: #FF5722;
            border-radius: .4rem;
            padding: 0 1rem 0 1rem;
            font-size: 1.4rem;
            font-weight: 500;
        }
    }
    .item-main{
        padding: 2.5rem 3rem 1rem 3rem;
        font-size: 1.6rem;
        color: #333;
        .label{
            color: #999999;
            margin-right: 2rem;
        }
    }
    .item-table{
        width: 98%;
        margin: 1.5rem 2rem 0rem 2rem;
        border-radius: 0.4rem;
        border: 1px solid #F3F3F3;
        .item-table-head, .item-table-data {
            display: flex;
            height: 6rem;
            align-items: center;
            background-color: #F2F2F2;
            color: #999999;
            font-size: 1.6rem;
        }

        .item-table-head div, .item-table-data div {
            flex: 1;
            text-align: center;
        }

        .item-table-data {
            background-color: #fff;
        }
    }
`

export const JinggaoBox = styled.div`
    background: rgba(246, 246, 246, .99);
    border-radius: 4px;
    padding: 1rem 1rem;
    display: flex;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 1.2rem;
    color: #666666;
    box-sizing: border-box;
    .iconfont {
        margin-right: 1rem;
        color: #999999;
    }
    div{
        word-break: break-all;
    }
`

export const PLCCanshuBox = styled.div`
    padding: 2rem 2rem;
    box-sizing: border-box;
`